﻿<!DOCTYPE html>

<html>
<head>
<title></title>
<script type="text/javascript">
    var _LoadImage = []; ///<summary>加载完成的Image对像数组</summary>
    var _NextImageIndex = 0; ///<summary>下次要显示的图片在_LoadImage的索引位置</summary>
    function LoadImageURL(ImageCount) {
        ///<summary>初始化的时候要得到所有图片的地址</summary>
        ///<param name="ImageCount" type="number">图片的个数</param>
        var _InitImageURL = [];
        for (var i = 0; i < parseInt(ImageCount); i++) {
            var _url = "Image/" + (i + 1).toString() + ".jpg";
            _InitImageURL.push(_url);
            PushMsg("Push _InitImageURL:" + _url);
        }
        LoadImage(_InitImageURL);
    }
    function GetRandomNum(Min, Max) {
        ///<summary>到得Min和Max之间的随机数</summary>
        ///<param name="Min" type="number">开始的数值</param>
        ///<param name="Max" type="number">结束的数值</param>
        var Range = Max - Min;
        var Rand = Math.random();
        return (Min + Math.round(Rand * Range));
    }
    function LoadImage(ImageURL) {
        ///<summary>用图片地址初始化Image对像</summary>
        ///<param name="ImageURL" type="array">图片的地址数组</param>
        while (ImageURL.length != 0) {
            var img = new Image();
            img.src = ImageURL.pop();
            img.onload = function () {
                _LoadImage.push(this);
                PushMsg("Push _LoadImage:" + this.src);
            }
        }
    }
    function PushMsg(message) {
        ///<summary>日志输出</summary>
        ///<param name="message" type="string">日志内容</param>
        var _span = document.createElement("span");
        _span.innerText = message;
        var msg = document.getElementById("msg");
        msg.appendChild(_span);
        var _br = document.createElement("br");
        msg.appendChild(_br);
    }
    window.onload = function () {
        LoadImageURL(11);
        setInterval(SwitchImage, 2000); //无效果的切换
        SwitchImageFour(false, document.getElementById("CanvasSwitch")); //分四步切换(右下,左下,左上,右上).true:顺时针,false:逆时针
    }
    
    function SwitchImage() {
        ///<summary>无特效的切换图片</summary>
        var ca = document.getElementById("CanvasSwitch1");
        if (ca.getContext) {
            var ctx = ca.getContext("2d");
            ctx.drawImage(_LoadImage[_NextImageIndex], 0, 0);
            _NextImageIndex = (_NextImageIndex + 1) % _LoadImage.length;
        }
    }
    function SwitchImageFour(isClockwise, Canvas) {
        ///<summary>分四步切换(右下,左下,左上,右上)</summary>
        ///<param name="isClockwise" type="bool">是否顺时针方向</param>
        ///<param name="Canvas" type="object">Canvas对像</param>
        SwitchImageFourstep.isClockwise = isClockwise;
        SwitchImageFourstep.Canvas = Canvas;
        if (isClockwise) {
            setTimeout(SwitchImageFourstep.step1, 100);
        } else {
            setTimeout(SwitchImageFourstep.step4, 100);
        }
    }
    var SwitchImageFourstep=new Object();
    SwitchImageFourstep.step1 = function () {
        var ca = SwitchImageFourstep.Canvas;
        if (ca.getContext) {
            var ctx = ca.getContext("2d");
            var _image = _LoadImage[_NextImageIndex];
            var _imageWidth = parseInt(_image.width);
            var _imageHeight = parseInt(_image.height);
            var _caWidth = parseInt(ca.width);
            var _caHeight = parseInt(ca.height);
            ctx.drawImage(_image, _imageWidth / 2, _imageHeight / 2, _imageWidth / 2, _imageHeight / 2, _caWidth / 2, _caHeight / 2, _caWidth / 2, _caHeight / 2);
            if (SwitchImageFourstep.isClockwise) {
                setTimeout(SwitchImageFourstep.step2, 100);
            } else {
                _NextImageIndex = (_NextImageIndex + 1) % _LoadImage.length;
                setTimeout(SwitchImageFourstep.step4, 1700);
            }
        }
    }
    SwitchImageFourstep.step2 = function () {
        var ca = SwitchImageFourstep.Canvas;
        if (ca.getContext) {
            var ctx = ca.getContext("2d");
            var _image = _LoadImage[_NextImageIndex];
            var _imageWidth = parseInt(_image.width);
            var _imageHeight = parseInt(_image.height);
            var _caWidth = parseInt(ca.width);
            var _caHeight = parseInt(ca.height);
            ctx.drawImage(_image, 0, _imageHeight / 2, _imageWidth / 2, _imageHeight / 2, 0, _caHeight / 2, _caWidth / 2, _caHeight / 2);
            if (SwitchImageFourstep.isClockwise) {
                setTimeout(SwitchImageFourstep.step3, 100);
            } else {
                setTimeout(SwitchImageFourstep.step1, 100);
            }
        }
    }
    SwitchImageFourstep.step3 = function () {
        var ca = SwitchImageFourstep.Canvas;
        if (ca.getContext) {
            var ctx = ca.getContext("2d");
            var _image = _LoadImage[_NextImageIndex];
            var _imageWidth = parseInt(_image.width);
            var _imageHeight = parseInt(_image.height);
            var _caWidth = parseInt(ca.width);
            var _caHeight = parseInt(ca.height);
            ctx.drawImage(_image, 0, 0, _imageWidth / 2, _imageHeight / 2, 0, 0, _caWidth / 2, _caHeight / 2);
            if (SwitchImageFourstep.isClockwise) {
                setTimeout(SwitchImageFourstep.step4, 100);
            } else {
                setTimeout(SwitchImageFourstep.step2, 100);
            }
        }
    }
    SwitchImageFourstep.step4 = function () {
        var ca = SwitchImageFourstep.Canvas;
        if (ca.getContext) {
            var ctx = ca.getContext("2d");
            var _image = _LoadImage[_NextImageIndex];
            var _imageWidth = parseInt(_image.width);
            var _imageHeight = parseInt(_image.height);
            var _caWidth = parseInt(ca.width);
            var _caHeight = parseInt(ca.height);
            ctx.drawImage(_image, _imageWidth / 2, 0, _imageWidth / 2, _imageHeight / 2, _caWidth / 2, 0, _caWidth / 2, _caHeight / 2);
            if (SwitchImageFourstep.isClockwise) {
                _NextImageIndex = (_NextImageIndex + 1) % _LoadImage.length;
                setTimeout(SwitchImageFourstep.step1, 1700);
            } else {
                setTimeout(SwitchImageFourstep.step3, 100);
            }
        }
    }
</script>
</head>
<body>
    <div>
        <canvas id="CanvasSwitch" width="275" height="200"></canvas>
        <canvas id="CanvasSwitch1" width="275" height="200"></canvas>
    </div>
    <div id="msg"></div>
</body>
</html>
